<template>
  <div>web麦克风</div>
  <el-button @click="startRecord">点击开始录音</el-button>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // 浏览器支持 getUserMedia
    console.log('浏览器支持麦克风访问')
    console.log(navigator)
  } else {
    alert('浏览器不支持麦克风访问');
  }
})

const startRecord = () => {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      const audioContext = new AudioContext();
      const source = audioContext.createMediaStreamSource(stream);
      const destination = audioContext.destination;
      source.connect(destination); // 播放麦克风捕获的音频
    })
    .catch(error => {
      // 发生错误
      console.error('无法访问麦克风:', error);
    });
}
</script>

<style scoped lang="scss">

</style>